/* 导包 */
/* @import可以把样式导入另一个样式，link只能把样式导入html */
@import "commom.css";
@basefont: 50;

a {
  text-decoration: none;
}

body {
  height: 1000px;
  margin: 0 auto;
  width: (750rem / @basefont);
  min-width: 320px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background: #f2f2f2;
  border-top: 1px solid transparent;

  .index_nav {
    position: fixed;
    z-index: 5;
    width: (750rem / @basefont);
    height: (180rem / @basefont);
    background: #ffdb47;
    font-size: 0.48rem;
    line-height: 1.76rem;
    overflow: hidden;

    .content_wrap_one {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      width: (682rem / @basefont);
      height: (88rem / @basefont);

      .class,
      .login {
        display: block;
        width: (36rem / @basefont);
        height: (60rem/ @basefont);
      }

      .top_ad {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 11.4rem;
        height: 1.76rem;

        a {
          width: 7.8rem;
          height: 1.52rem;
        }

        img {
          width: 7.8rem;
          height: 1.52rem;
        }
      }
    }

    .content_wrap_two {
      width: 15rem;
      height: 1.84rem;
      padding: 0 0.48rem;

      .search_bar {
        position: relative;

        .search {
          display: block;
          position: absolute;
          width: 100%;
          height: 1.76rem;

          .search-icon {
            position: absolute;
            width: (36rem / @basefont);
            height: (36rem / @basefont);
            top: 0.5rem;
            left: 0.4rem;
            background-image: url(../images/search-icon.png);
            background-size: 0.72rem 0.72rem;
          }
        }

        .searchInput {
          border: none;
          border-radius: .6rem;
          padding: 0.06rem 0.4rem 0 1.3rem;
          box-sizing: border-box;
          width: 100%;
          height: 1.28rem;
        }
      }
    }
  }
}

// banner
.banner {
  position: relative;
  margin-top: (180rem / @basefont);
  height: (229rem / @basefont);

  img {
    width: 100%;
    height: (229rem / @basefont);
  }

  .swipe_wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    border-radius: (24rem / @basefont);
    left: (24rem / @basefont);
    width: (702rem / @basefont);
    height: (229rem / @basefont);

    .banner_ad {
      width: 100%;
      height: 100%;
      background: url(../uploads/banner-ad.png) no-repeat;
      background-size: 100%;
    }
  }
}

// ad
.ad {
  display: flex;
  margin-top: 10px;
  height: (180rem / @basefont);

  a {
    flex: 1;

    img {
      width: 100%;
    }
  }
}

// nav模块
.nav {
  width: (750rem / @basefont);
  height: (300rem / @basefont);
  // background-color: #fff;

  a {
    float: left;
    width: (150rem / @basefont);
    height: (140rem / @basefont);
    text-align: center;

    img {
      display: block;
      width: (82rem / @basefont);
      height: (82rem / @basefont);
      margin: (24rem / @basefont) auto 0;
    }

    .title {
      font-size: (22rem / @basefont);
      color: #333;
    }
  }

}
